<template>
  <view class="container">
    <view class="search">
      <u-search placeholder="请输入快递单号" :showAction="false" v-model="keyword" @search="search"></u-search>
    </view>
    
    <!-- history -->
    <view class="history">
      <view class="tip">
        <span>历史记录</span>
        <u-icon name="trash-fill" color="grey" size="20"></u-icon>
      </view>
      <view class="history-message">
        <text class="lishi">JT3031693406784</text>
      </view>
    </view>
    
    <view class="detail" >
    	<u-steps :current="current" direction="column" dot>
    		<u-steps-item v-for="item in text.list" :title="item.content" :desc="item.time">
    		</u-steps-item>
    	</u-steps>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // YT7146504171083
        current:0,
        keyword: '',
        apikey: "0d47aefdc49a9bb7d64d8f79913a221c",
        text: {}
      };
    },
    // JT3031693406784
    methods: {
      // 获取数据的接口
      search() {
        uni.request({
          url: "https://apis.tianapi.com/kuaidi/index?key=" + this.apikey + "&number=" + this.keyword,
          success: (res) => {
            this.text = res.data.result;
            console.log(this.text)
            this.current= this.text.list.length
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 10px;
    .search{
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
    }
    .history{
      margin-top: 10px;
      margin-bottom: 10px;
      min-height:80px;
      background-color: #eee;
      border-radius: 8px;
      .tip{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 15px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
      }
    }
    .detail{
      margin-left: 10px;
    }
    .lishi{
      background-color: #fff;
      margin: 5px;
      display: block;
      width: 150px;
      padding: 5px;
      border-radius: 5px;
    }
  }
</style>